<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="./script/rem.js"></script>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>

    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script>
</head>
<body>


    <header class="head" style="padding-top:0.4rem;">
        <div class="head-l" tapmode onclick="closeWin()"><i class="fa fa-angle-left"></i></div>
        <h3>我的零售</h3>
        <div class="head-r"></div>
    </header>
    <div class="head-d" style="padding-top:0.4rem;"></div>

    <!-- 无记录 -->
    <div class="wallet-d-no mt100" id="order_record">
        <img src="image/wallet-d-no.png">
        <p>无零售记录啦！</p>
    </div>

    <div style="display:none;" id="order_list">
        <dl class="order-t">
            <dt>订单号：123456789056789<span>待收货</span></dt>
            <p>姓名：张华</p> 
            <dd>订单日期：2016-10-22   10:28</dd> 
        </dl>
        <div class="order-manage-goods mb20">
            <ul tapmode onclick="order_manage_details()">
                <li>
                    <img src="image/classify.jpg">
                    <dl>
                        <dt>澳大利亚·毛孔脏东西浮出来·麦卢...</dt>
                        <dd>x22</dd>
                    </dl>
                </li>
                <li>
                    <img src="image/classify.jpg">
                    <dl>
                        <dt>澳大利亚·毛孔脏东西浮出来·麦卢...</dt>
                        <dd>x22</dd>
                    </dl>
                </li>
            </ul>
            <div class="order-manage-d">
                <font color="#FF0000">合计￥20000</font>
            </div>
        </div>
    </div>
    <script type="text/template" id="order_list_new">
        {{~it.data:value:index}}
        <div>
            <dl class="order-t">
                <dt>订单号：{{=value.pay_number}}<span>{{=value.action.status_str}}</span></dt>
                <p>姓名：{{=value.name}}</p> 
                <dd>订单日期：{{=value.create_time}}</dd> 
            </dl>
            <div class="order-manage-goods mb20">
                <ul tapmode onclick="order_manage_details({{=value.id}})">
                    {{~value.cart:valuee:indexx}}
                    <li>
                        <img src="{{=valuee.product.image}}">
                        <dl>
                            <dt>{{=valuee.product.title}}</dt>
                            <dd>x{{=valuee.number}}</dd>
                        </dl>
                    </li>
                    {{~}}
                </ul>
                <div class="order-manage-d">
                    <font color="#FF0000">合计￥{{=value.price_total}}</font>
                    <span class="on" onclick="handleOrder({{=value.id}});">删除订单</span>
                </div>
            </div>
        </div>
        {{~}}
    </script>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/index.js"></script>
<script type="text/javascript">
    apiready = function(){
        order_list();
        pullLoading();
        initRefresh();
    }

    function order_list(more){
            // 进度提示框
            api.showProgress({
                title: '努力加载中...',
                text: '请稍等...',
                modal: false
            });
            if (more) {
                page += 1;
            }else{
                page = 1;
            }
            var token = $api.getStorage('token');
            api.ajax({
                url: webAddress + '/api/user/order/list',
                method: 'get',
                data: {
                    values: { 
                        page: page,
                        row: row,
                    },
                },
                headers: {
                    Authorization: 'Bearer ' + token,
                    Accept: 'application/json',
                },
            },function(ret, err){
                api.hideProgress();
                api.refreshHeaderLoadDone();
                if (ret) {
                    // alert( JSON.stringify( ret ) );

                    templateFun(ret,more);
                    
                } else {
            // alert( JSON.stringify( err ) );
        }
    });
        }

    // 上拉加载
    function pullLoading(){
      api.addEventListener({
        name: 'scrolltobottom',
        extra: {
          threshold: 0
      }
  }, function(ret, err){
    order_list(1);
});
  }

  // 下拉刷新
  function initRefresh() {
    api.setRefreshHeaderInfo({
        visible: true,
        // loadingImg: 'widget://image/gril.png',
        bgColor: '#ccc',
        textColor: '#fff',
        textDown: '下拉刷新...',
        textUp: '松开刷新...',
        showTime: true
    }, function(ret, err){
        order_list();
    });
};

function templateFun(data,more){

    var order_record = $api.byId('order_record');
    var order_list = $api.byId('order_list');
    order_record.style.display='none';
    order_list.style.display='block';
    var order = $api.byId('order_list_new');
    var dotFn = doT.template(order.innerHTML);
    var html = dotFn(data);
    var order_list = $api.byId('order_list');
        // $api.html(order_list, html);
        if(more){
            if(data.length){
                $api.append(order_list, html);
            }else{
                api.toast({
                    msg: '没有啦！',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        }else{
            if (data.data.length) {
               $api.html(order_list, html);
           }else{
              var html = '<h2 style="padding:1rem; text-align:center; color:#999; font-size:0.5rem;">暂无内容</h2>';
              order_list.innerHTML = html;
          }
      }
  }

  function order_manage_details(data_) {
    api.openWin({
        name: 'order_manage_details',
        url: './order_manage_details.html',
        pageParam: {
            id: data_
        }
    });
}

    // 处理订单
    function handleOrder(id){

        api.confirm({
            title: '提示!',
            msg: '是否删除订单?',
            buttons: ['确定', '取消']
        }, function(ret, err){
            if( ret ){
             // alert( JSON.stringify( ret ) );
             if (ret.buttonIndex == 1) {
                var token = $api.getStorage('token');
                api.ajax({
                    url: webAddress + '/api/order/'+id+'/delete',
                    method: 'get',
                    data: {
                        values: {
                            id:id
                        },
                    },
                    headers: {
                        Authorization: 'Bearer ' + token,
                        Accept: 'application/json',
                    },
                },function(ret, err){
                    if (ret) {
                        // alert( JSON.stringify( ret ) );
                        if (ret.status_code == 200) {
                            api.toast({
                                msg: ret.message,
                                duration: 2000,
                                location: 'bottom'
                            });
                            // loadData(0,type);
                            order_list();
                        }
                    } else {
                        // alert( JSON.stringify( err ) );
                        api.toast({
                            msg: err.body.message,
                            duration: 2000,
                            location: 'bottom'
                        });
                        return false;
                    }
                });
            }
        }else{
             // alert( JSON.stringify( err ) );
             api.toast({
                msg: err.body.message,
                duration: 2000,
                location: 'bottom'
            });
             return false;
         }
     });

    }

    function closeWin(){
        api.closeWin({
        });
    }
</script>
</html>